<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
	<view class="page">
		<view class="item_head">
			<block v-for="(item,index) in product_batch_process_sheet" :key="index">
				<!-- <block> -->
				<view class="item_heads" v-if="item.type == 'text'">
					<view class="item_title">
						{{item.name}}<text v-if="item.required == 1" style="color: red;margin-left: 15rpx;">*</text>
					</view>
					<view class="item_input_head">
						<input class="item_input" v-model="text_value" type="text" :placeholder="item.tip" />
						<u-icon v-if="text_value != ''" @click="del_text()" name='close'></u-icon>
					</view>
				</view>
				<view class="item_heads" v-if="item.type == 'textarea'">
					<view class="item_title">
						{{item.name}}<text v-if="item.required == 1" style="color: red;margin-left: 15rpx;">*</text>
					</view>
					<view class="item_input_head">
						<textarea class="item_input" v-model="textarea_value" type="textarea"
							:placeholder="item.tip"></textarea>
						<u-icon v-if="textarea_value != ''" @click="del_textarea()" name='close'></u-icon>
					</view>
				</view>
				<view class="item_heads" v-if="item.type == 'radio'">
					<view class="item_title">
						{{item.name}}<text v-if="item.required == 1" style="color: red;margin-left: 15rpx;">*</text>
					</view>
					<view class="item_check_head">
						<view :class="radio_value == it?'item_check_itmes':'item_check_itme'"
							v-for="(it,ind) in item.default" :key="ind" @click="get_radio(it)">
							{{it}}
						</view>
					</view>
				</view>
				<view class="item_heads" v-if="item.type == 'checkbox'">
					<view class="item_title">
						{{item.name}}<text v-if="item.required == 1" style="color: red;margin-left: 15rpx;">*</text>
					</view>
					<view class="item_check_head">
						<view :class="it.check == true?'item_check_itmes':'item_check_itme'"
							v-for="(it,ind) in check_box" :key="ind" @click="get_check(it,ind)">
							{{it.name}}
						</view>
					</view>
				</view>
				<view class="item_heads" v-if="item.type == 'time'">
					<view class="item_title">
						{{item.name}}<text v-if="item.required == 1" style="color: red;margin-left: 15rpx;">*</text>
					</view>
					<view class="item_input_head">
						<!-- <input class="item_input" type="text" value="06:16:00" placeholder="请输入内容" /> -->
						<picker mode="time" :value="time" start="" end="" @change="bindTimeChange">
							<view class="" v-if="time == ''">
								点击选择时间
							</view>
							<view class="uni-input" v-else>{{time}}</view>
						</picker>
						<u-icon name='arrow-right'></u-icon>
					</view>
				</view>
				<view class="item_heads" v-if="item.type == 'date'">
					<view class="item_title">
						{{item.name}}<text v-if="item.required == 1" style="color: red;margin-left: 15rpx;">*</text>
					</view>
					<view class="item_input_head">
						<!-- <input class="item_input" type="text" value="2022-04-01" placeholder="请输入内容" /> -->
						<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<view class="" v-if="date == ''">
								点击选择日期
							</view>
							<view v-else class="uni-input">{{date}}</view>
						</picker>
						<u-icon name='arrow-right'></u-icon>
					</view>
				</view>
				<view class="item_heads" v-if="item.type == 'uploadImg'">
					<view class="item_title">
						{{item.name}}<text v-if="item.required == 1" style="color: red;margin-left: 15rpx;">*</text>
					</view>
					<view class="upload_head">
						<view class="upload_item" v-for="(it,ind) in img_url" :key="ind">
							<image class="upload_item_img" :src="it" mode=""></image>
							<view class="upload_item_msg" @click="del_img(ind)">
								<u-icon name="close" size="20rpx" color="#fff"></u-icon>
							</view>
						</view>
						<view class="upload_items" @click="insertImage()">
							<u-icon size="50rpx" name='camera'></u-icon>
							<view>上传图片</view>
						</view>
					</view>
				</view>
				<view class="item_heads" v-if="item.type == 'uploadVideo'">
					<view class="item_title">
						{{item.name}}<text v-if="item.required == 1" style="color: red;margin-left: 15rpx;">*</text>
					</view>
					<view class="upload_head">
						<view class="upload_item" v-for="(it,ind) in video_url" :key="ind">
							<video class="upload_item_img" :src="it" mode=""></video>
							<view class="upload_item_msg" @click="del_video(ind)">
								<u-icon name="close" size="20rpx" color="#fff"></u-icon>
							</view>
						</view>
						<view class="upload_items" @click="inserVideo()">
							<u-icon size="50rpx" name='camera'></u-icon>
							<view>上传视频</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<!-- 底部按钮 -->
		<view class="bottom_head">
			<view class="bottom_left" @click="get_record()">
				<!-- <image src="../../md_admin/images/md-setting.png" mode=""></image> -->
				<text class="iconfont icon-shangchuanbeiandanzheng"></text>
				<view>看记录</view>
			</view>
			<view class="bottom_right" @click="get_product_batch_process_log_sheet_edit()">提交记录</view>
		</view>
	</view>
</template>
<script>
	import source from "../../api/source/index.js";
	export default {
		data() {
			return {
				show_type: false,
				product_batch_process_id: 0,
				product_batch_process_sheet: [],
				img_url: [],
				video_url: [],
				text_value: '',
				textarea_value: '',
				radio_value: '',
				check_list: [],
				check_box: [],
				time: '',
				date: ''
			}
		},
		created(e) {

		},
		onLoad(e) {
			if (e.product_batch_process_id) {
				this.product_batch_process_id = e.product_batch_process_id;
			}
			this.get_my_product_batch_process_sheet();
		},
		methods: {
			get_record() {
				uni.navigateTo({
					url: '../record/record'
				})
			},
			del_text() {
				this.text_value = '';
			},
			del_textarea() {
				this.textarea_value = '';
			},
			get_check(it, ind) {
				this.check_box[ind].check = !this.check_box[ind].check
				if (this.check_list.length == 0) {
					this.check_list.push(it.name)
				} else {
					if (this.check_list.includes(it.name)) {
						for (var i = 0; i < this.check_list.length; i++) {
							if (this.check_list[i] == it.name) {
								this.check_list.splice(i, 1)
							}
						}
					} else {
						this.check_list.push(it.name)
					}

				}
			},
			get_radio(it) {
				this.radio_value = it;
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			bindTimeChange: function(e) {
				this.time = e.detail.value
			},
			get_product_batch_process_log_sheet_edit() {
				var process_log_id = this.product_batch_process_sheet[0].process_log_id;
				var sheet_list = [];
				var product_batch_process_sheet = this.product_batch_process_sheet;
				for (var i = 0; i < product_batch_process_sheet.length; i++) {
					if (product_batch_process_sheet[i].type == 'text') {
						if (this.text_value == '' && product_batch_process_sheet[i].required == 1) {
							uni.showToast({
								title: '请填写' + product_batch_process_sheet[i].name
							})
							return;
						}
						var obj = {
							key: product_batch_process_sheet[i].name,
							type: product_batch_process_sheet[i].type,
							value: this.text_value,
							process_sheet_id: product_batch_process_sheet[i].id
						};
						sheet_list.push(obj)
					} else if (product_batch_process_sheet[i].type == 'textarea') {
						if (this.textarea_value == '' && product_batch_process_sheet[i].required == 1) {
							uni.showToast({
								title: '请填写' + product_batch_process_sheet[i].name
							})
							return;
						}
						var obj = {
							key: product_batch_process_sheet[i].name,
							type: product_batch_process_sheet[i].type,
							value: this.textarea_value,
							process_sheet_id: product_batch_process_sheet[i].id
						};
						sheet_list.push(obj)
					} else if (product_batch_process_sheet[i].type == 'radio') {
						if (this.radio_value == '' && product_batch_process_sheet[i].required == 1) {
							uni.showToast({
								title: '请选择' + product_batch_process_sheet[i].name
							})
							return;
						}
						var obj = {
							key: product_batch_process_sheet[i].name,
							type: product_batch_process_sheet[i].type,
							value: this.radio_value,
							process_sheet_id: product_batch_process_sheet[i].id
						};
						sheet_list.push(obj)
					} else if (product_batch_process_sheet[i].type == 'checkbox') {
						if (this.check_list.length == 0 && product_batch_process_sheet[i].required == 1) {
							uni.showToast({
								title: '请选择' + product_batch_process_sheet[i].name
							})
							return;
						}
						var obj = {
							key: product_batch_process_sheet[i].name,
							type: product_batch_process_sheet[i].type,
							value: JSON.stringify(this.check_list),
							process_sheet_id: product_batch_process_sheet[i].id
						};
						sheet_list.push(obj)
					} else if (product_batch_process_sheet[i].type == 'time') {
						if (this.time == '' && product_batch_process_sheet[i].required == 1) {
							uni.showToast({
								title: '请选择' + product_batch_process_sheet[i].name
							})
							return;
						}
						var obj = {
							key: product_batch_process_sheet[i].name,
							type: product_batch_process_sheet[i].type,
							value: this.time,
							process_sheet_id: product_batch_process_sheet[i].id
						};
						sheet_list.push(obj)
					} else if (product_batch_process_sheet[i].type == 'date') {
						if (this.date == '' && product_batch_process_sheet[i].required == 1) {
							uni.showToast({
								title: '请选择' + product_batch_process_sheet[i].name
							})
							return;
						}
						var obj = {
							key: product_batch_process_sheet[i].name,
							type: product_batch_process_sheet[i].type,
							value: this.date,
							process_sheet_id: product_batch_process_sheet[i].id
						};
						sheet_list.push(obj)
					} else if (product_batch_process_sheet[i].type == 'uploadImg') {
						if (this.img_url.length == 0 && product_batch_process_sheet[i].required == 1) {
							uni.showToast({
								title: '请上传' + product_batch_process_sheet[i].name
							})
							return;
						}
						var obj = {
							key: product_batch_process_sheet[i].name,
							type: product_batch_process_sheet[i].type,
							value: JSON.stringify(this.img_url),
							process_sheet_id: product_batch_process_sheet[i].id
						};
						sheet_list.push(obj)
					} else if (product_batch_process_sheet[i].type == 'uploadVideo') {
						if (this.video_url.length == 0 && product_batch_process_sheet[i].required == 1) {
							uni.showToast({
								title: '请上传' + product_batch_process_sheet[i].name
							})
							return;
						}
						var obj = {
							key: product_batch_process_sheet[i].name,
							type: product_batch_process_sheet[i].type,
							value: JSON.stringify(this.video_url),
							process_sheet_id: product_batch_process_sheet[i].id
						};
						sheet_list.push(obj)
					}
				}
				source.product_batch_process_log_sheet_edit({
					process_log_id: process_log_id,
					sheet_list: JSON.stringify(sheet_list)
				}).then((res) => {
					if (res.code == 0) {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							})
						}, 2000);
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			del_img(i) {
				this.img_url.splice(i, 1)
			},
			del_video(i) {
				this.video_url.splice(i, 1)
			},
			inserVideo() {
				uni.chooseVideo({
					count: 1,
					sourceType: ['album', 'camera'],
					sizeType: ["original", "compressed"],
					success: (res) => {
						if (res.errMsg == "chooseVideo:ok") {
							var tempFilePaths = res.tempFilePath;
							this.$http.UPLOAD_VIDEO(tempFilePaths, (res) => {
								if (res.code == 0) {
									this.video_url.push(res.url)
								} else {
									uni.showToast({
										title: res.msg,
										icon: "none",
										duration: 2000,
									});
								}
							});
						}
					},
					file: (res) => {},
				});
			},
			insertImage() {
				this.$utils.uploadImage(9, (res) => {
					this.img_url.push(res);
				},()=>{},this.compressImage ? ["compressed"] : ["original"]);
			},
			get_my_product_batch_process_sheet() {
				source.my_product_batch_process_sheet({
					product_batch_process_id: this.product_batch_process_id
				}).then((res) => {
					if (res.code == 0) {
						var product_batch_process_sheet = res.product_batch_process_sheet;
						for (var i = 0; i < product_batch_process_sheet.length; i++) {
							if (product_batch_process_sheet[i].type == 'text') {
								this.text_value = product_batch_process_sheet[i].value
							}
							if (product_batch_process_sheet[i].type == 'textarea') {
								this.textarea_value = product_batch_process_sheet[i].value
							}
							if (product_batch_process_sheet[i].type == 'time') {
								this.time = product_batch_process_sheet[i].value
							}
							if (product_batch_process_sheet[i].type == 'date') {
								this.date = product_batch_process_sheet[i].value
							}
							if (product_batch_process_sheet[i].type == 'radio') {
								product_batch_process_sheet[i].default = product_batch_process_sheet[i].default
									.split(',')
								this.radio_value = product_batch_process_sheet[i].value
							}
							if (product_batch_process_sheet[i].type == 'checkbox') {
								product_batch_process_sheet[i].default = product_batch_process_sheet[i].default
									.split(',')
									var value = JSON.parse(product_batch_process_sheet[i].value)
								for (var j = 0; j < product_batch_process_sheet[i].default.length; j++) {
									
										
											var obj = {
												name: product_batch_process_sheet[i].default[j],
												check: false
											}
											this.check_box.push(obj)
										
								}
								for (var k = 0; k < value.length; k++) {
									for (var o = 0; o <this.check_box.length; o++) {
										if(value[k] == this.check_box[o].name){
											this.check_box[o].check = true;
											this.check_list.push(this.check_box[o].name)
										}
									}
								}
							}
							if (product_batch_process_sheet[i].type == 'uploadImg') {
								this.img_url = JSON.parse(product_batch_process_sheet[i].value)
							}
							if (product_batch_process_sheet[i].type == 'uploadVideo') {
								this.video_url = JSON.parse(product_batch_process_sheet[i].value)
							}
						}
						// if(this.check_box[0]){
						// 	this.check_box[0].check = true;
						// 	this.check_list.push(this.check_box[0].name)
						// }
						this.product_batch_process_sheet = product_batch_process_sheet;

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			get_null() {},
			get_show() {
				this.show_type = !this.show_type
			}
		}
	}
</script>
<style scoped>
	.icon-shangchuanbeiandanzheng {
		/* width: 53rpx;
		height: 68rpx; */
		font-size: 50rpx;
		background: #000;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}

	.bottom_right {
		width: 528rpx;
		height: 88rpx;
		border-radius: 90rpx;
		color: #fff;
		background: #F0250E;
		text-align: center;
		line-height: 88rpx;
		font-size: 36rpx;
		font-weight: 600;
		margin-right: 22rpx;
	}

	.bottom_left view {
		color: #000000;
		font-size: 20rpx;
		padding-top: 4rpx;
	}

	.bottom_left image {
		width: 30rpx;
		height: 36rpx;
	}

	.bottom_left {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 48rpx;
	}

	.bottom_head {
		width: 100%;
		height: 136rpx;
		background: #FFF;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	/* 底部按钮 */
	.upload_items view {
		padding-top: 16rpx;
		font-size: 24rpx;
		color: #8C8C8C;
	}

	.upload_items u-icon {
		width: 50rpx;
		height: 46rpx;
		padding-top: 32rpx;
	}

	.upload_items {
		width: 160rpx;
		height: 160rpx;
		border-radius: 25rpx;
		margin-right: 16rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #F6F6F6;
	}

	.upload_item_msg {
		width: 32rpx;
		height: 32rpx;
		border-radius: 90rpx;
		position: absolute;
		right: -10rpx;
		top: -10rpx;
		background-color: #F0250E;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.upload_item_img {
		width: 100%;
		height: 100%;
	}

	.upload_item {
		width: 160rpx;
		height: 160rpx;
		border-radius: 25rpx;
		position: relative;
		margin-right: 16rpx;
		background: #F6F6F6;
		margin-bottom: 15rpx;
	}

	.upload_head {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 24rpx;
	}

	.item_check_itme {
		padding: 8rpx 20rpx;
		background: #F2F1F2;
		border-radius: 90rpx;
		color: #000000;
		margin-right: 24rpx;
		font-size: 24rpx;
		margin-bottom: 24rpx;
	}

	.item_check_itmes {
		padding: 5rpx 15rpx;
		border: 1rpx solid #FF3A46;
		background: #FCEDEB;
		border-radius: 90rpx;
		color: #FF3A46;
		margin-right: 24rpx;
		font-size: 24rpx;
		margin-bottom: 24rpx;
	}

	.item_check_head {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.item_input {
		color: #8C8C8C;
		font-size: 28rpx;
	}

	.item_input_head image {
		width: 32rpx;
		height: 32rpx;
		border-radius: 90rpx;
	}

	.item_input_head {
		display: flex;
		padding-bottom: 24rpx;
		align-items: center;
		justify-content: space-between;
	}

	.item_title {
		padding: 24rpx 0;
		font-size: 30rpx;
		color: #262626;
		font-weight: 600;
	}

	.item_heads {
		width: 95%;
		border-bottom: 1rpx solid #F8F8F8;
		margin: 0 auto;
		margin-bottom: 24rpx;
	}

	.item_head {
		width: 100%;
		background: #FFF;
		margin-top: 20rpx;
		padding-bottom: 200rpx;
	}

	.page {
		background: rgb(242, 242, 242);
		min-height: 100vh;
		width: 100%;
	}
</style>
